<template>
	<view class="welfare" v-if="list.length">
		<view class="welfare-title flex flex-ai-c flex-jc-sb">
			<!-- 左边 -->
			<view class="flex flex-ai-c">
				<view class="line"></view>
				<view class="title">附近门店</view>
			</view>
			<!-- 右边 -->
			<view class="welfare-right flex flex-ai-c">
				<view @click="goPage">更多</view>
				<view>
					<u-icon name="arrow-right" size="23" color="#999999"></u-icon>
				</view>
			</view>
		</view>
		<view style="font-size: 24rpx;line-height: 60rpx;">全部有<text style="color: #FF4B44;">{{storeTotal}}家</text>7迈养车连锁店开业</view>
		<!-- <view style="font-size: 24rpx;line-height: 60rpx;" v-if="!this.$store.state.district">{{this.$store.state.city}}有<text style="color: #FF4B44;">{{storeTotal}}家</text>7迈养车连锁店开业</view>
		<view style="font-size: 24rpx;line-height: 60rpx;" v-else>{{ this.$store.state.district | cutString(8)}}有<text style="color: #FF4B44;">{{storeTotal}}家</text>7迈养车连锁店开业</view> -->
		<!-- 附近 -->
		<view v-for="(item,index) in list" :key='item.id' style="padding-bottom: 30rpx;" @click="goDetails(item.id)">
			<view class="nearby flex">
				<!-- 左边 -->
				<view class="nearby-img">
					<u-image :src="item.store_topimg+'!idx'" width="240" height="160" border-radius="10" mode="aspectFit" v-if="item.store_topimg"></u-image>
					<u-image src="https://files.yzsheng.com/client/store/mentouzhao.png!idx" width="240" height="160" border-radius="10"
					 mode="aspectFit" v-else></u-image>
				</view>
				<!-- 右边 -->
				<view class="nearby-right">
					<view>
						<view class="flex">
							<view class="nearby-right-title">{{item.store_name | cutString(21)}}</view>
							<view class="store">
								<text style="margin-right: 10rpx;" :class="'type-' + item.store_type">{{item.store_type | formatStoreType}}</text>
								<!-- 	<text class="experience" v-show="item.isTy">体验店</text>
								<text class="core" v-show="item.isZx">中心店</text> -->
							</view>
						</view>
						<view class="flex flex-jc-sb">
							<view class="address" style="text-align: left;">{{item.address}}</view>
							<view style="color: #666666;font-size: 24rpx;">{{item.distance}}Km</view>
						</view>
					</view>
					<view class="flex flex-jc-sb">
						<view class="time">{{item.bussinesstime}}</view>

						<!-- <view class="live flex flex-jc-c flex-ai-c">
							<i-icon icon="iconw_luxiang" size="32rpx"></i-icon>
							<text style="margin-left: 10rpx;">门店实况直播</text>
						</view> -->
					</view>
				</view>

			</view>
			<view class="nearby-footer flex" v-if="item.service_project">
				<view style="width: 20%;">服务项目</view>
				<view class="flex flex-wrap-w" style="width: 80%;">
					<view style="width: 20%;" class="flex flex-ai-c" v-for="(item2,index2) in item.service_project" :key='index'>
						<view class="yuan"></view>
						<text v-if='item2.car_wash'>洗车</text>
						<text v-if='item2.car_beauty'>美容</text>
						<text v-if='item2.tyre'>轮胎</text>
						<text v-if='item2.metal_plate'>钣金</text>
						<text v-if='item2.maintain'>保养</text>
						<text v-if='item2.spray_lacquer'>喷漆</text>
						<text v-if='item2.refit'>改装</text>
						<text v-if='item2.install'>安装</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			//列表
			list: {
				type: Array,
				default: () => {}
			},
			//总条数
			storeTotal: {
				type:Number,
				default: 0
			},
			
		},
		data() {
			return {

			}
		},
		created() {

		},
		filters: {
			cutString(str, len) {
			  if (str.length * 2 <= len) {
			    return str
			  }
			  let strlen = 0
			  let s = ''
			  for (let i = 0; i < str.length; i++) {
			    s = s + str.charAt(i)
			    if (str.charCodeAt(i) > 128) {
			      strlen = strlen + 2
			      if (strlen >= len) {
			        return s.substring(0, s.length - 1) + '...'
			      }
			    } else {
			      strlen = strlen + 1
			      if (strlen >= len) {
			        return s.substring(0, s.length - 2) + '...'
			      }
			    }
			  }
			  return s
			},
			formatStoreType(data) {
				let text = ''
				switch (Number(data)) {
					case 1:
					case 6:
						text = '旗舰店'
						break
					case 0:
					case 2:
						text = '体验店'
						break
					case 3:
					case 8:
						text = '中心店'
						break
					case 4:
						text = '4s店'
						break
					default:
						text = '旗舰店'
						break
				}
				return text
			}
		},
		methods: {
			login() {
			  uni.setStorage({
			    key: 'launchFlag',
			    data: false,
			  })
			  uni.navigateTo({
			    url: '/pages_logins/login/login'
			  })
			},
			goDetails(id) {
				let token = uni.getStorageSync('token')
				if (!token) {
				  this.$u.toast('请登录！')
				  this.$u.debounce(this.login, 1000)
					return false
				}
				uni.navigateTo({
					url: '/pages_store/carMaintenanceStore/details/details?storeid=' + id
				})
			},
			goPage() {
				uni.switchTab({
					url: '/pages/store/store'
				})
			},
		}
	}
</script>

<style lang="scss">
	.line {
		width: 10rpx;
		height: 30rpx;
		background: linear-gradient(0deg, #FBD220, #FFE23E);
		border-radius: 5rpx;

	}

	.welfare {


		.title {
			margin-left: 20rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}

		//右边
		.welfare-right {
			color: #999999;
			font-size: 24rpx;
			font-weight: 500;
		}
	}

	// 附近门店
	.nearby {

		&-img {
			width: 38%;
			height: 160rpx;

			image {
				width: 240rpx;
				height: 100%;
				border-radius: 10rpx;
			}
		}

		.nearby-right {
			width: 62%;
			padding-bottom: 30rpx;
			border-bottom: 2rpx solid #EEEEEE;
			line-height: 47rpx;

			&-title {
				font-size: 30rpx;
				font-weight: 500;
				color: #333333;
			}

			//店铺类型
			.store {
				margin-left: 20rpx;

				.type-1,
				.type-6 {
					background-image: linear-gradient(0deg, #FBD220, #FFE23E);
				}

				.type-2 {
					background: linear-gradient(0deg, #FFEEC8, #FFAD9A);
				}

				.type-3,
				.type-8 {
					background: linear-gradient(0deg, #93BCFF, #BEF4FF);
				}

				.type-4 {
					background: linear-gradient(0deg, #A8D36A, #ECF9C3);
				}

				text {
					background: linear-gradient(0deg, #FBD220, #FFE23E);
					border-radius: 8rpx;
					font-size: 20rpx;
					font-weight: 500;
					color: #3F3F3F;
					padding: 0rpx 5rpx;
				}

				.experience {
					margin-right: 10rpx;
					background: linear-gradient(0deg, #90F2DE, #68EAF3, #67CDF7);
				}

				.core {
					margin-right: 10rpx;
					background: linear-gradient(0deg, #FFD39B, #FF7590);
				}
			}

			//地址
			.address {
				// width: 332rpx;
				display: -webkit-box;
				overflow: hidden;
				// white-space: normal !important;
				text-overflow: ellipsis;
				// word-wrap: break-word;
				font-weight: 500;
				-webkit-line-clamp: 1;
				font-size: 24rpx;
				color: #999999;
				-webkit-box-orient: vertical;
			}

			.time {
				font-size: 24rpx;
				font-weight: 500;
				color: #666666;
			}

			.live {
				width: 210rpx;
				height: 42rpx;
				border: 2rpx solid #FF4B44;
				border-radius: 21rpx;
				color: #FF4B44;
				font-size: 24rpx;
				font-weight: 500;
				margin-top: 15rpx;
			}
		}


	}

	.nearby-footer {
		border-bottom: 2rpx solid #EEEEEE;
		padding: 30rpx 0;

		.yuan {
			width: 16rpx;
			height: 16rpx;
			background: #FBD220;
			border-radius: 50%;
			margin-right: 5rpx;
		}
	}
</style>
